<template>
  <div class="layout">
    <div class="lonas-content">
      <div style="display: flex; justify-content: space-between">
        <Breadcrumb class="breadcrumb" :crumbs="crumbs"></Breadcrumb>
        <!-- <div class="backBtn" @click="goBack()">返回上一步</div> -->
      </div>
      <div class="content-div">
        <div class="cotent-head">
          <div class="head-title">{{ dataDetail.productTitle }}</div>
          <div class="head-tip">{{ dataDetail.object }}</div>
        </div>
        <el-row class="apply-time">
          <el-col :span="3" class="apply-title">申请时间</el-col>
          <el-col :span="5" class="apply-question"
            >{{ dataDetail.applyStartTime }}至{{
              dataDetail.applyEndTime
            }}</el-col
          >
          <el-col :span="3" class="apply-title">发文时间</el-col>
          <el-col :span="5" class="apply-question">{{
            dataDetail.publishTime
          }}</el-col>
          <el-col :span="3" class="apply-title">发文部门 </el-col>
          <el-col :span="5" class="apply-question">
            {{ dataDetail.publishDepartment }}
          </el-col>
        </el-row>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="121px"
          class="demo-ruleForm"
          label-position="left"
        >
          <el-form-item label="申请理由:" prop="applyReason">
            <el-input
              type="textarea"
              v-model.trim="ruleForm.applyReason"
              resize="none"
              maxlength="300"
              show-word-limit
              :rows="4"
              placeholder="请输入申请理由"
              class="reason-input"
            ></el-input>
          </el-form-item>
          <el-form-item label="上传申请材料：" prop="material">
            <addUpload @changeUp="changeUp"></addUpload>
          </el-form-item>
          <div class="btns">
            <Buttons :buttons="buttons" @apply="submitForm('ruleForm')" @goBack="goBack"></Buttons>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import Breadcrumb from "@/components/breadcrumb";
import addUpload from "@/components/financiaUpload";
import { host, api } from "@/utils/config.js";
import { request } from "@/utils/request.js";
import { financeProductApplyAdd, getProductDetail } from "@/common/api/finance"

export default {
  components: {
    Breadcrumb,
    addUpload,
  },
  data() {
    return {
      buttons:[
        {text:"返回",type:"normal",size:"l",method:"goBack"},
        {text:"立即申请",type:"success",size:"l",method:"apply"}
      ],
      crumbs: [
        {
          label: "金融服务",
          value: "finance",
        },
        {
          label: "金融产品清单",
          value: "financeProduct",
        },
        {
          label: "金融产品详情",
          value: "financeProductDetail",
        },
        {
          label: "金融产品申请",
          value: "",
          choose: true,
        },
      ],
      dataDetail: {}, // 页面详情数据
      ruleForm: {
        // 表单
        productId: "",
        productName: "",
        applyReason: "",
        material: "",
      },
      rules: {
        applyReason: [
          { required: true, message: "请填写申请理由", trigger: "blur" },
        ],
        material: [
          { required: true, message: "请上传申请材料", trigger: "change" },
        ],
      },
      financeProObject: [],
      financePartObject: [],
    };
  },
  computed: {
    getType(val) {
      return function (val) {
        let typeName = "";
        let apis = api.dictUrl + "/finance_product_object";
        request(this, apis, {}).then((res) => {
          if (res.code == 200) {
            for (let i in res.data.finance_product_object) {
              if (res.data.finance_product_object[i].dictValue == val) {
                typeName = res.data.finance_product_object[i].dictLabel;
              }
            }
            console.log(234, typeName);
            return typeName;
          }
        });
      };
    },
    getObjType(val) {
      return function (val) {
        for (let i in this.financeProObject) {
          if (res.data.finance_product_object[i].dictValue == val) {
            return res.data.finance_product_object[i].dictLabel;
          }
        }
      };
    },
  },
  methods: {
    /**
     * 上传文件触发
     * @param obj 上传文件数据
     * @return {void}
     */
    changeUp(obj) {
      // let arr = [];
      // for (let i in obj) {
      //   arr.push(obj[i].batchId);
      // }
      this.ruleForm.material =obj[0].batchId;
      this.$refs["ruleForm"].validateField("material");
    },
    /**
     * 立即申请触发
     * @param formName 表单
     * @return {void}
     */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.subForm();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /**
     * 提交请求接口
     * @param {void}
     * @return {void}
     */
    async subForm() {
      // let api = `${host}/finance/financeProduct/apply/add`;
      // let res = await request(this, api, this.ruleForm, "POST");
      let res = await financeProductApplyAdd(this.ruleForm)
      console.log("res",res);
      if (res.code != '200') return this.$message.error(msg)
      this.$message.success("立即申请成功");
      this.$router.back();
    },
    /**
     * 获取详情
     * @param {void}
     * @return {void}
     */
    async getDetail() {
      let productId = this.ruleForm.productId;
      // let api = `${host}/finance/financeProduct/get/${productId}`;
      // let res = await request(this, api, {}, "GET");
      let { code, data, msg } = await getProductDetail(productId)
      if (code != '200') return this.$message.warning(msg)
      for (let i in this.financeProObject) {
        if (this.financeProObject[i].dictValue == data.object) {
          data.object = this.financeProObject[i].dictLabel;
        }
      }
      for (let j in this.financePartObject) {
        if (
          this.financePartObject[j].dictValue == data.publishDepartment
        ) {
          data.publishDepartment = this.financePartObject[j].dictLabel;
        }
      }
      this.ruleForm.productName = data.productTitle;
      console.log(23344, data);
      this.dataDetail = data;
      // if (res.code == 200) {
      //   for (let i in this.financeProObject) {
      //     if (this.financeProObject[i].dictValue == res.data.object) {
      //       res.data.object = this.financeProObject[i].dictLabel;
      //     }
      //   }
      //   for (let j in this.financePartObject) {
      //     if (
      //       this.financePartObject[j].dictValue == res.data.publishDepartment
      //     ) {
      //       res.data.publishDepartment = this.financePartObject[j].dictLabel;
      //     }
      //   }
      //   this.ruleForm.productName = res.data.productTitle;
      //   console.log(23344, res.data);
      //   this.dataDetail = res.data;
      // } else {
      //   this.$message.error(res.msg);
      // }
    },
    // 获取字典表
    async seePartType() {
      let api = `finance_publish_department,finance_product_object`;
      // 调用公共方法中的查询字典表
      await this.getDictList(this,api).then((res) => {
        this.financeProObject = res.finance_product_object;
        this.financePartObject = res.finance_publish_department;
      })
    },
    /**
     * 返回上一页
     */
    goBack() {
      this.$router.back();
    },
  },
  activated() {
    this.seePartType();
    if (this.$route.query.productId) {
      this.ruleForm.productId = this.$route.query.productId;
      this.getDetail();
    }
  },
};
</script>
<style lang="scss" scoped>
.btns{
  display: flex;
  justify-content: center;
}
.btns .btn{
  margin-top:30px ;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #f1f2f4;
    color: #045db9;
    font-size: 16px;
    border-radius: 5px;
    -webkit-transition: all .2s;
    transition: all .2s;
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}
.lonas-content {
  width: $main-width;
  margin: 0 auto;
}
.lonas-content .backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 20px;
}
.breadcrumb {
  width: $main-width;
  margin: 20px 0;
}
.content-div {
  width: 900px;
  margin: 30px auto 0;
  text-align: left;
}
.content-div .cotent-head {
  width: 100%;
  display: flex;
  display: -webkit-flex;
  align-content: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 2px solid $colorA;
}
.content-div .cotent-head .head-title {
  font-size: 20px;
  font-weight: bold;
  color: $colorA;
}
.content-div .cotent-head .head-tip {
  font-size: 14px;
  color: #999999;
}
.content-div .apply-time {
  width: 100%;
  margin: 24px 0;
  border: 1px solid #eeeeee;
  text-align: center;
  display: flex;
}
.content-div .apply-time .apply-title {
  padding: 7px 0;
  font-size: 14px;
  color: #333333;
  background: #f4f4f4;
  text-align: center;
}
.content-div .apply-time .apply-question {
  padding: 7px 0;
  font-size: 14px;
  color: #333333;
}
.upload-demo {
  width: 548px;
}
.apply-btn {
  background: #045db9;
  margin-bottom: 100px;
  margin-top: 30px;
}
.uploadBtn {
  background-color: #f1f2f4;
  color: #045db9;
  border-width: 0;
}
</style>
<style>
.content-div .reason-input .el-textarea__inner {
  width: 548px;
}
.content-div .reason-input .el-input__count {
  right: 280px;
}
</style>
